<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3常用</title>
    <link rel="stylesheet" href="css/css3.css">
</head>
<body>
    <div class="container">
        <!--水平向右展开-->
         <div class="btn">
            hello
            <div class="box"></div>
        </div>
        <!--垂直向下展开-->
        <div class="btn1">
            hello
            <div class="box1"></div>
        </div>
        <!--两边向中间展开-->
         <div class="btn2">
            hello
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
        <!--水平向左展开-->
        <div class="btn3">
            hello
            <div class="box4"></div>
        </div>
    </div>
   <div class="center">
       <!--垂直向上展开-->
        <div class="btn5">
            hello
            <div class="box5"></div>
        </div>
        <!--垂直方向上中间向外展开-->
         <div class="btn6">
            hello
            <div class="box6"></div>
            <div class="box7"></div>
        </div>
         <!--垂直方向上中间向l展里开-->
         <div class="btn7">
            hello
            <div class="box8"></div>
            <div class="box9"></div>
        </div>
         <!--水平方向上中间向外展开-->
          <div class="btn8">
            hello
            <div class="box10"></div>
            <div class="box11"></div>
        </div>
   </div>
    <div class="content">
        <div class="skew">
            hello
            <div class="trans"></div>
        </div>
        <div class="skew1">
            hello
            <div class="trans1"></div>
        </div>
         <div class="skew2">
            hello
            <div class="trans2"></div>
        </div>
    </div>
</body>
</html>